import { computed, defineComponent, inject, ref, type PropType } from 'vue'
interface Props {
  onClick?: (event: MouseEvent) => void
  onMousedown?: (event: MouseEvent) => void
  onMouseup?: (event: MouseEvent) => void
}
export default defineComponent({
  props: {
    block: Object
  },
  emits: ['setStyle'],
  setup(props, { emit }) {
    const blockContainer: any = ref(null)
    const componentMap = inject('componentMap')
    // 计算样式
    const computedStyle = computed(() => {
      let style = { ...props.block?.style }
      style.left += 'px'
      style.top += 'px'
      if (!blockContainer.value) return style
      const { offsetWidth, offsetHeight } = blockContainer.value
      if (offsetWidth) {
        style = {
          left: props.block?.style.left - offsetWidth / 2 + 'px',
          top: props.block?.style.top - offsetHeight / 2 + 'px'
        }
        emit('setStyle', offsetWidth, offsetHeight)
      }

      return style
    })
    // 待渲染的组件
    const renderBlock = (componentMap as Map<string, { [key: string]: any }>)?.get(
      props.block?.key || ''
    ) || { render: '' }
    return () => (
      <div
        class="inline-block absolute no-editor select-none box-border"
        ref={blockContainer}
        style={computedStyle.value}
      >
        {renderBlock?.render}
      </div>
    )
  }
})
